<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/01index.css" />
    <link rel="stylesheet" href="../css/02cartList.css" />
  </head>
  <body>
    <!-- header -->
    <div class="header">
      <img class="logo" src="../img/header-logo.png" alt="" />
      <div class="infoContainer">
        <!-- a添加跳转页面 -->
        <a href="03productCart.html" class="info">
          <img src="../img/shopping_cart_icon.png" alt="" />
          <!-- em中数字修改 -->
          <!-- <em>0</em> -->
        </a>
        <a href="#" class="info user" >
          <img src="../img/user_icon.png" alt="" />
        </a>
        <div class="info-con" style="z-index: 999;">
          <div class="title">正品代购，假一赔三！</div>
          <div class="info-inner">
            <div class="login">
              <span>密码登录</span><br />
              <input type="text" placeholder="用户名" /><span></span><br />
              <input type="password" placeholder="请填写密码" /><span></span
              ><br />
              <button class="login-btn">登录</button>
            </div>
            <div class="reg">
              <span>注册用户</span><br />
              <p>注册账号以便追踪您的订单，管理收货 地址，获取更多个性化信息</p>
              <button class="r-btn">创建账号</button>
            </div>
          </div>
          <div class="cancle-btn">×</div>
        </div>

        <div class="regHtml" style="z-index: 999;">
          <div class="title">正品代购，假一赔三！</div>
          <div class="regHtml-con">
            <div>
              用户名*<input
                type="text"
                placeholder="请输入用户名"
              /><span></span>
            </div>
            <br />
            <div>
              密&nbsp;&nbsp;&nbsp;码*<input
                type="password"
                placeholder="请输入密码，至少6个字符"
              /><span></span>
            </div>
            <br />
            <div>
              确定密码*<input
                type="password"
                placeholder="请再次输入您的密码"
              /><span></span>
            </div>
            <br />
            <button class="reg-btn">立即注册</button>
            <a href="#">已有账号，我要登录></a>
          </div>
          <div class="cancle-btn">×</div>
        </div>
      </div>
    </div>
    <!-- nav -->
    <div class="nav">
      <div class="nav-con"><a href="#">首页</a></div>
      <div class="icon">
        <span class="icon-con"></span>
      </div>
      <div class="nav-con"><a href="#">产品分类</a></div>
      <div class="icon">
        <span class="icon-con"></span>
      </div>
      <div class="nav-con"><a href="#">香水知识</a></div>
      <div class="icon">
        <span class="icon-con"></span>
      </div>
      <div class="nav-con"><a href="#">品牌故事</a></div>
      <div class="icon">
        <span class="icon-con"></span>
      </div>
      <div class="nav-con"><a href="#">香水小样</a></div>
    </div>
    <!-- prodcut-detail -->
    <div class="prodcut-detail">
      <div class="product-left-wrapper"></div>
      <div class="product-right-wrapper">
        <div class="product-title"></div>
        <div class="product-evaluate">
          <span class="evaluate-icon"></span>
          <span class="evaluate-con">0条评论</span>
        </div>
        <div class="opation">
          <div class="change">选择产品：</div>
          <div class="capacity">100ml</div>
        </div>
        
        <div class="product-price"></div>
        <div class="purchase">

          <!-- <a href="#" class="addCart">加入购物袋</a>
          <a class="immediatelyBuy">立即购买</a> -->
        </div>
        <div class="product-bottom">
            原装进口，正品保证，假一赔三
        </div>
      </div>
    </div>
    <!-- bottom -->
    <div class="bottom">
        <div class="bottom-nav">
            <div class="nav-box">
                <p>购物指南</p>
                <a href="#">购物流程</a>
                <a href="#">我的购物车</a>
                <a href="#">我的订单</a>
            </div>
            <div class="nav-box">
                <p>配送与支付</p>
                <a href="#">支付方式</a>
                <a href="#">配送方式</a>
            </div>
            <div class="nav-box">
                <p>服务与政策</p>
                <a href="#">退换货政策</a>
                <a href="#">正品保证</a>
            </div>
        </div>
        <div class="bottom-con">
            <p>本站是买手店，所涉及Serge Lutens、芦丹氏标志和图案的全部均为Serge Lutens公司注册商标。<br>
                © 2020 Ludanshi.net</p>
        </div>
      
    </div>
    <script src="../js/axios.min.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/01reg-login.js"></script>
    <script>
     
      productDetail();
      async function productDetail(){
        let productLeft = document.querySelector(".product-left-wrapper");
        let productTitle = document.querySelector(".product-title");
        let productPrice = document.querySelector(".product-price");
        let purchase = document.querySelector(".purchase");
        
        let object = new URLSearchParams(location.search);
        let pid = object.get("pid");
        console.log(pid);
        let {data} = await axios.get(productDetailAPI, {
            params: {id: pid}
        })
        let pObj = data.data;
        console.log(pObj);
        let html = `
            <img class="big-product" src="${pObj.pimg}" alt="" />
            <img class="small-product" src="${pObj.pimg}" alt="" />
        `
        productLeft.innerHTML = html;

        let html2 = `
            <h2 class="prodcut-desc">${pObj.pdesc}</h2>
            <h1 class="prodcut-name">${pObj.pname}</h1> 
        `
        productTitle.innerHTML = html2;

        let html3 = `
            <span>${pObj.pprice}</span>
        `
        productPrice.innerHTML = html3;

        let html4 = `
          <a href="#" class="addCart">加入购物袋</a>
          <a class="immediatelyBuy">立即购买</a>
        `
        purchase.innerHTML = html4;

        let immediatelyBuy = document.querySelector(".immediatelyBuy");
        console.log(immediatelyBuy);

        immediatelyBuy.onclick = async function(){
              let uid = localStorage.getItem("uid");
              let pnum = 1;
              let params = {pid, uid, pnum};
              let {data}= await axios.get(cartAddAPI, {params});
              console.log(data);
              alert("加入购物车成功");
              location.href = "03productCart.html"
          }
        
        let addCart = document.querySelector(".addCart");
        addCart.onclick = async function(){
              let uid = localStorage.getItem("uid");
              let pnum = 1;
              let params = {pid, uid, pnum};
              let {data}= await axios.get(cartAddAPI, {params});
              console.log(data);
              alert("加入购物车成功");
          }
        
        
      }

    </script>

  </body>
</html>
